<!DOCTYPE html>
<html lang="cn">

<head>
    <link href="../css/main-css.css" rel="stylesheet">
</head>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="../js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="../css/myCss.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>superVideo使用教程</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background-color: #292929;
        }

        * {
            padding: 0;
            margin: 0;
        }

        /* 设置视频外部容器样式 */
        #videoContainer,
        #videoContainer2 {
            width: 800px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 80px;
        }

        ul {
            background-color: rgb(124, 124, 124);
            margin: 0px;
            text-align: center;
        }

        li {
            font-size: 25px;

        }

        li:hover {
            color: aqua;
        }

        h1 {
            color: rgb(0, 208, 255);
            text-align: center;
        }

        /* #videoContainer2,#videoContainer3,#videoContainer4,#videoContainer5,#videoContainer6{
            display: none;
           
        } */
        b {
            color: royalblue;
        }
    </style>

<body>
    <noscript>
        <strong>We're sorry but soucecode doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong>
    </noscript>
    <h1>
        1-机器人总动员 2-生之欲 3-瞒天劫 4-泰坦尼克号   5-海上钢琴师
    </h1>
    <!-- 设置视频插件容器 -->
    <div id="videoContainer"><b>机器人总动员</b></div>
    <!-- <div id="videoContainer2"><b>生之欲</b></div>
    <div id="videoContainer3"><b>瞒天劫</b></div>
    <div id="videoContainer4"><b>素媛</b></div>
    <div id="videoContainer5"></div>
    <div id="videoContainer6"></div> -->
    <script type="text/javascript" src="../js/superVideo.js"></script>
</body>
<script>
    let i = 0;
    /* 以下将定义视频插件常用的几个控件 */
    // 实例化一个“下一个”按钮控件
    var nextControl = new Super.NextControl()
    // 实例化一个倍速控件
    var Dbspeen = new Super.DbspeenControl()
    // 实例化一个弹幕输入框控件
    var BarrageControl = new Super.BarrageControl()
    // 实例化一个全屏按钮控件
    var fullScreenControl = new Super.FullScreenControl()
    // 实例化视频播放资源


    var source = new Super.VideoSource({
        // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
        // src: 视频路径，可以是本地路径亦可是网络路径
        type: 'mp4',
        src: 'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/2a9783f7bbb2414eb510e76a4a25a7ab?filename=1.mp4'

    })
    // let source = 'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/2a9783f7bbb2414eb510e76a4a25a7ab?filename=1.mp4';

    /* 插件的常用配置参数 */
    var config = {
        // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
        autoplay: false,
        currentTime: 0, // 设置视频初始播放时间，单位为秒
        loop: false, // 是否循环播放
        muted: false, // 是否默认静音
        playbackRate: 1, // 视频默认播放速度
        poster: '', // 视频首帧图片路径
        volume: 0.5, // 视频默认音量 0-1
        showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
        source: source, // 为视频插件设置资源
        leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
        rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
        centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
    }

    //初始化插件superVideo('videoContainer')请对应好html中的插件容器id.
    var video = new Super.Svideo('videoContainer', config)

    /* 以下是控件类常用的监听事件 */

    // 监听“下一个”按钮控件点击事件
    nextControl.addEventListener('click', function (event) {
        i++;
        if (i == 1) {
            // $("#videoContainer").css("display", "none");
            // $("#videoContainer2").css("display", "block");
            var source = new Super.VideoSource({
                // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
                // src: 视频路径，可以是本地路径亦可是网络路径
                type: 'mp4',
                src: 'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/cda136e6a430495bbdbf3d59be208e3d?filename=1.mp4'

            })
            $("#videoContainer").replaceWith("<div id='videoContainer'><b>生之欲</b></div>")

            var config = {
                // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
                autoplay: false,
                currentTime: 0, // 设置视频初始播放时间，单位为秒
                loop: false, // 是否循环播放
                muted: false, // 是否默认静音
                playbackRate: 1, // 视频默认播放速度
                poster: '', // 视频首帧图片路径
                volume: 0.5, // 视频默认音量 0-1
                showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
                source: source, // 为视频插件设置资源
                leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
                rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
                centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
            }
            var video = new Super.Svideo('videoContainer', config)
        } else if (i == 2) {
            // $("#videoContainer2").css("display", "none");
            // $("#videoContainer3").css("display", "block");
            var source = new Super.VideoSource({
                // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
                // src: 视频路径，可以是本地路径亦可是网络路径
                type: 'mp4',
                src: 'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/5fa13cf0a7a14eb1a64d47d36669dd4d?filename=1.mp4'

            })
            $("#videoContainer").replaceWith("<div id='videoContainer'><b>满天劫</b></div>")
           
            var config = {
                // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
                autoplay: false,
                currentTime: 0, // 设置视频初始播放时间，单位为秒
                loop: false, // 是否循环播放
                muted: false, // 是否默认静音
                playbackRate: 1, // 视频默认播放速度
                poster: '', // 视频首帧图片路径
                volume: 0.5, // 视频默认音量 0-1
                showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
                source: source, // 为视频插件设置资源
                leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
                rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
                centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
            }
            var video = new Super.Svideo('videoContainer', config)
        } else if (i == 3) {
            // $("#videoContainer3").css("display", "none");
            // $("#videoContainer4").css("display", "block");
            var source = new Super.VideoSource({
                // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
                // src: 视频路径，可以是本地路径亦可是网络路径
                type: 'mp4',
                src: 'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/5ccca347bda94e9586959c20a91dbd7c?filename=1.mp4'

            })
            $("#videoContainer").replaceWith("<div id='videoContainer'><b>泰坦尼克号（无字幕）</b></div>")
           
            var config = {
                // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
                autoplay: false,
                currentTime: 0, // 设置视频初始播放时间，单位为秒
                loop: false, // 是否循环播放
                muted: false, // 是否默认静音
                playbackRate: 1, // 视频默认播放速度
                poster: '', // 视频首帧图片路径
                volume: 0.5, // 视频默认音量 0-1
                showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
                source: source, // 为视频插件设置资源
                leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
                rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
                centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
            }
            var video = new Super.Svideo('videoContainer', config)
        }else if(i==4){

            var source = new Super.VideoSource({
                // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
                // src: 视频路径，可以是本地路径亦可是网络路径
                type: 'mp4',
                src: 'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/c65edffac6c44e1b8cf54ccb5aff2127?filename=1.mp4'

            })
            $("#videoContainer").replaceWith("<div id='videoContainer'><b>海上钢琴师</b></div>")
           
            var config = {
                // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
                autoplay: false,
                currentTime: 0, // 设置视频初始播放时间，单位为秒
                loop: false, // 是否循环播放
                muted: false, // 是否默认静音
                playbackRate: 1, // 视频默认播放速度
                poster: '', // 视频首帧图片路径
                volume: 0.5, // 视频默认音量 0-1
                showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
                source: source, // 为视频插件设置资源
                leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
                rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
                centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
            }
            var video = new Super.Svideo('videoContainer', config)
            
        }else if(i=5){

            var source = new Super.VideoSource({
                // type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频
                // src: 视频路径，可以是本地路径亦可是网络路径
                type: 'mp4',
                src: 'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/2a9783f7bbb2414eb510e76a4a25a7ab?filename=1.mp4'

            })
            $("#videoContainer").replaceWith("<div id='videoContainer'><b>机器人总动员</b></div>")
           
            var config = {
                // 是否自动播放（该功能受限于浏览器安全策略，可能会失效，解决思路为初始化时设置为静音，加载完毕后取消静音）
                autoplay: false,
                currentTime: 0, // 设置视频初始播放时间，单位为秒
                loop: false, // 是否循环播放
                muted: false, // 是否默认静音
                playbackRate: 1, // 视频默认播放速度
                poster: '', // 视频首帧图片路径
                volume: 0.5, // 视频默认音量 0-1
                showPictureInPicture: true, // 是否启用画中画模式按钮（>=Chrome10有效）
                source: source, // 为视频插件设置资源
                leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件
                rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件
                centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”
            }
            var video = new Super.Svideo('videoContainer', config)

            i=0;
            
        }


    })


    // 监听进入全屏模式后触发（点击进入全屏按钮）
    fullScreenControl.addEventListener('fullscreen', function (event) {
        console.log('is fullscreen !!!')
    })
    // 监听退出全屏模式后触发（点击退出全屏按钮）
    fullScreenControl.addEventListener('cancelfullscreen', function (event) {
        console.log('cancel fullscreen !!!')
    })
    // 监听发送弹幕输入框输入并发送弹幕后触发
    BarrageControl.addEventListener('send', function (event) {
        var value = event.target.option.value
        console.log('send ' + value)
    })

    /* 以下是video类常用的监听事件 */
    // 视频准备就绪
    video.addEventListener('ready', function () {
        console.log('is ready!')
    })
    // 开始播放
    video.addEventListener('play', function () {
        console.log('is play!')
    })
    // 暂停播放
    video.addEventListener('pause', function () {
        console.log('is pause!')
    })
    // 监听进入全屏模式后触发
    video.addEventListener('fullscreen', function (event) {
        console.log('is fullscreen !!!')
    })
    // 监听退出全屏模式后触发
    video.addEventListener('cancelfullscreen', function (event) {
        console.log('cancel fullscreen !!!')
    })

    /* 下面将演示弹幕类的用法 */

    // 初始化一个弹幕实例
    var barrage1 = new Super.Barrage('我是一条红色的超大号字体弹幕', {
        color: 'red',
        fontSize: 30
    })
    // 将该弹幕加入播放器插件
    video.addBarrage(barrage1)

    // 还可以在弹幕中插入一些dom节点
    var vipDom = document.createElement('span')
    vipDom.innerHTML = 'V'
    vipDom.style.color = 'green'
    vipDom.style.fontSize = '20px'
    vipDom.style.fontWeight = '600'
    vipDom.style.marginRight = '4px'
    var barrage2 = new Super.Barrage('我是超级会员VIP', {
        color: 'orange',
        fontSize: 15,
        leftDom: vipDom // 将DOM插入弹幕左侧
    })
    video.addBarrage(barrage2)

    // 当然也可以这样简单的使用
    video.addBarrage('冲鸭~~~~~~')
    video.addBarrage('奥里给！！！！！！')

    /*
      说在最后：
      superVideo还有许多实用的方法/事件/属性，想深入使用的请参考API文档 —— https://hulalalalala.github.io/superVideo/api/index.html
      开源不易，希望各位爱心人士点个STAR支持以下 —— https://github.com/hulalalalala/superVideo
    */
</script>

</html>